<template>
  <a-modal
    v-model:visible="visible"
    :title="'修改密码'"
    draggable
    :width="width"
    @cancel="handleCancel"
  >
    <a-form :model="formData" ref="formRef" auto-label-width>
      <a-spin :loading="loading">
        <a-row>
          <a-form-item
            label="旧密码"
            field="oldPassword"
            :rules="[{required:true,message:'旧密码不能为空'}]"
            :validate-trigger="['blur']"
          >
            <a-input-password
              v-model:visibility="visibility"
              v-model="formData.oldPassword"
              placeholder="请输入旧密码"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
          <a-form-item
            label="新密码"
            field="newPassword"
            :rules="[{required:true,message:'新密码不能为空'},{minLength: 5, maxLength: 20, message:'长度在6到20个字符'}]"
            :validate-trigger="['blur']"
          >
            <a-input-password
              v-model:visibility="visibility"
              v-model="formData.newPassword"
              placeholder="请输入新密码"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
          <a-form-item
            label="确认密码"
            field="confirmPassword"
            :rules="[{required:true,message:'确认密码不能为空'}, {required: true, validator: validateConfirmPassword}]"
            :validate-trigger="['blur']"
          >
            <a-input-password
              v-model:visibility="visibility"
              v-model="formData.confirmPassword"
              placeholder="请确认密码"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
        </a-row>
      </a-spin>
    </a-form>
    <template #footer>
      <a-button
        style="margin-right: 8px"
        @click="handleCancel"
      >{{ $t('searchTable.columns.operations.close') }}</a-button>
      <a-button
        type="primary"
        @click="handleSubmit"
        :loading="loading"
      >{{ $t('searchTable.columns.operations.save') }}</a-button>
    </template>
  </a-modal>
</template>
  <script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Modal, Message } from '@arco-design/web-vue';

import { updateSysUserPwd, UserPasswordData } from '@/api/sys/user';

const { t } = useI18n();

const loading = ref(false);
const visible = ref(false);
const width = ref('calc(28%)');

// 密码加密
const visibility = ref(true);

// 表单
const formRef = ref<any>();
const formData = ref<UserPasswordData>({});

// 打开弹窗
const onOpen = async (record: any) => {
  visible.value = true;
};

// 确认
const handleSubmit = async () => {
  formRef.value.validate().then((result: any) => {
    // 校验不通过
    if (result) {
      return;
    }
    loading.value = true;
    updateSysUserPwd(formData.value)
      .then(() => {
        onOk();
        Message.success(t('operations.success'));
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

// 取消
const handleCancel = () => {
  onOk();
};

// 确认
const onOk = () => {
  formRef.value.clearValidate();
  formData.value = {};
  visible.value = false;
};

// 确认密码校验
const validateConfirmPassword = (value, cb) => {
  if (value !== formData.value.newPassword) {
    cb(t('userSetting.SecuritySettings.error.confirm.password'));
  } else {
    cb();
  }
};

// 抛出函数
defineExpose({
  onOpen,
});
</script>
